<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <%@include file="../header.jsp" %>
 
  <style type="text/css">
  	.ui-tabs{
  		font-size:12px;
  		margin-top: 15px;
  	}
  	
  	#tabs li .ui-icon-close{
  		float:left;
  		margin: 0.4em 0.2em 0 0;
  		cursor: pointer;
  	}
  </style> 
</head>
<body style="font-size:62.5%;">
	<button id="add">添加选项卡...</button>
	<div id="dialog" title="添加选项卡">
		<form>
			<p><label for="title">标题：</label>
			<input type="text" id="title" class="ui-widget-content ui-corner-all" size="43">
			</p>
			
			<p><label for="content">内容：</label>
			<textarea cols="40" id="content" class="ui-widget-content ui-corner-all"></textarea>
			</p>
		</form>
	</div>
	
	<div id="tabs">
		<ul>
			<li><a href="#tabs-1">描述</a><span class="ui-icon ui-icon-close">close</span></li>
		</ul>
		<div id="tabs-1">
			hello i am tabs-1
		</div>
	</div>
	

<script type="text/javascript">
	$("#add").button().click(function(){
		$("#dialog").dialog("open");
	})
	$("#dialog").dialog({
		autoOpen:false,
		modal:true,
		position:"center",
		width:352,
		buttons:{"添加":addTab,"取消":function(){$(this).dialog("close")}},
		open:$("input#title").focus(),
		close:function(){$("form")[0].reset();}
		
	})
	function addTab(){
		var counter=$("#tabs").tabs("length");
		counter++;
		var title=$("#title").val();
		if(title=="")
			title="选项卡"+counter;
		$("#tabs").tabs("add","#tabs-"+counter,title);
	}
	$("#tabs").tabs({
		tabTemplate:'<li><a href="<%="#"%>{href}"><%="#"%>{label}</a><span class="ui-icon ui-icon-close">close</span></li>'
	}).find(".ui-tabs-nav").sortable({axis:"x"});
	$("#tabs").bind("tabsadd",function(e,ui){
		var counter=$("#tabs").tabs("length");
		var content=$("#content").val();
		if(content=="")
			content="选项卡"+counter+"的内容";
		$(ui.panel).append("<p>"+content+"</p>");
	})
	$("#tabs span.ui-icon-close").live("click",function(){
		var index=$("li","#tabs").index($(this).parent());
		$("#tabs").tabs("remove",index);
	})
</script>
</body>
</html>